<template>
  <div class="base-web-login-contanier">
    <div class="base-web-login-wrapper">
      <div class="base-web-login-header">
        <h1>LOGO</h1>
        <div class="base-web-login-type">后台管理系统</div>
      </div>
      <div class="base-web-login-body">
        <div class="base-web-login-form">
          <div class="base-web-login-form-form">
            <h2 class="base-web-login-form-title">登录</h2>
            <el-form
              ref="formRef"
              style="max-width: 600px"
              :model="form"
              :rules="rules"
              label-width="auto"
              :size="'large'"
            >
              <el-form-item prop="username" label="用户名">
                <!-- 显示必填 * -->
                <el-input
                  v-model="form.username"
                  placeholder="请输入用户名"
                  style="width: 260px"
                  required
                ></el-input>
              </el-form-item>
              <el-form-item prop="password" label="密码">
                <el-input
                  v-model="form.password"
                  type="password"
                  placeholder="请输入密码"
                  style="width: 260px"
                  show-password
                  required
                />
              </el-form-item>
              <div class="dfdfdfdf">
                <el-form-item style="width: 100%">
                  <el-button
                    type="primary"
                    @click="submitForm"
                    style="width: 100%"
                    class="base-web-login-form-button"
                    >提交</el-button
                  >
                </el-form-item>
              </div>
            </el-form>
          </div>
          <div class="base-web-login-form-bgimg"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
const form = ref({
  username: "",
  password: "",
});

const rules = ref({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const formRef = ref();
const submitForm = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      ElMessage.success("登录成功");
      window.location.href = "/home";
    }
  });
};
</script>
<style lang="scss" scoped>
.base-web-login-contanier {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/background.svg");
  background-size: cover;
  /* 不重复 */
  background-repeat: no-repeat;
}
.base-web-login-wrapper {
  position: relative;
  display: flex;
  height: 100%;
}
.base-web-login-header {
  position: absolute;
  top: 50px;
  left: 50px;
  display: flex;
  height: 120px;
}
.base-web-login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.base-web-login-form {
  display: flex;
  width: 800px;
  height: 600px;
  border-radius: 4px;
  overflow: hidden;
}
.base-web-login-form > div {
  flex: 1;
}
.base-web-login-form-title {
  margin-bottom: 40px;
}
.base-web-login-type {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 20px;
}
.base-web-login-form-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.base-web-login-form-bgimg {
  background-image: url("@/assets/101.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
.base-web-login-form-button {
  margin-top: 20px;
}
.dfdfdfdf {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
</style>
